<template>
  <el-dialog :model-value="visible" title="邀请参会" @close="$emit('update:visible', false)">
    <div v-if="meeting" class="space-y-2">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="会议标题">
          <el-icon><Document /></el-icon> {{ meeting.title }}
        </el-descriptions-item>
        <el-descriptions-item label="会议时间">
          <el-icon><Calendar /></el-icon> {{ meeting.startTime }}
        </el-descriptions-item>
        <el-descriptions-item label="邀请链接">
          <div class="flex items-center gap-2">
            <el-input :value="inviteLink" readonly class="w-3/4" />
            <el-button type="primary" size="small" @click="copyLink"><CopyDocument class="icon-sm" /> 复制</el-button>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <el-button @click="$emit('update:visible', false)">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Document, Calendar, CopyDocument } from '@element-plus/icons-vue'
const props = defineProps({
  visible: Boolean,
  meeting: Object,
})
const inviteLink = computed(() => {
  if (!props.meeting?.id) return ''
  // 根據實際的會議邀請鏈接格式生成
  return `${window.location.origin}/meeting?join=${props.meeting.id}`
})
function copyLink() {
  const text = inviteLink.value
  if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
    navigator.clipboard.writeText(text)
      .then(() => {
        ElMessage.success('邀请链接已复制')
      })
      .catch(() => {
        fallbackCopyTextToClipboard(text)
      })
  } else {
    fallbackCopyTextToClipboard(text)
  }
}

function fallbackCopyTextToClipboard(text) {
  const input = document.createElement('input')
  input.value = text
  document.body.appendChild(input)
  input.select()
  try {
    document.execCommand('copy')
    ElMessage.success('邀请链接已复制')
  } catch (err) {
    ElMessage.error('复制失败，请手动复制')
  }
  document.body.removeChild(input)
}
</script>

<style scoped>
.el-descriptions {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
}
.flex {
  display: flex;
}
.gap-2 {
  gap: 8px;
}
.icon-sm {
  width: 16px;
  height: 16px;
  font-size: 16px;
  vertical-align: middle;
  margin-right: 2px;
}
</style> 